<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div style="position: relative">
        <div class="filter-line b-b-d flx-row-s-c">
          <span class="item-name">得标状态</span>
          <span
            v-for="(item, index) in biddingStatus"
            :key="'a' + index"
            class="select-item"
            :class="[index == biddingStatusSelect ? 'active' : 'normal']"
            style="margin-right: 20px"
            @click="changeClassify(index)"
          >
            {{ item }}
          </span>
        </div>
        <div
          class="filter-line b-b-d flx-row-s-c"
          v-if="biddingStatusSelect == 0"
        >
          <span class="item-name">交易状态</span>
          <span
            v-for="(item, index) in bidStatus"
            :key="index"
            class="select-item"
            :class="[index == bidStatusSelect ? 'active' : 'normal']"
            style="margin-right: 20px"
            @click="bidStatusSelectChange(index)"
          >
            {{ item.name }}
          </span>
        </div>
        <div class="filter-line b-b-d flx-row-s-c">
          <span class="item-name">结拍时间</span>
          <Select @on-change="changeDateType" v-model="dateType" style="width: 150px; margin-right: 10px">
            <Option
                v-for="item in dateTypeList"
                :value="item.type"
                :key="item.type"
            >{{ item.name }}</Option
            >
          </Select>
          <DatePicker
            :editable="false"
            type="daterange"
            split-panels
            placeholder="请选择"
            style="width: 210px"
            @on-change="dateChange"
            :options="dateOption"
            :value="time"
          ></DatePicker>
          <span class="item-name">结拍价格</span>
          <InputNumber
            v-model.trim="startPrice"
            number
            placeholder="请输入"
            maxlength="10"
            :min="0"
            type="number"
            style="width: 120px"
          />
          <div class="two-input-middle"></div>
          <InputNumber
            v-model.trim="endPrice"
            number
            placeholder=""
            type="number"
            maxlength="10"
            :min="0"
            style="width: 120px"
          />
        </div>
         <div class="filter-line b-b-d flx-row-s-c">
           <span class="item-name" style="text-align: right">域名</span>
           <div class="wrapdmTextarea">
             <div class="textarea-warp" style="z-index: 200; top: 0;">
               <Input class="ui-input dmTextarea" :class="dmName ? 'dmTyping' : ''" @on-focus="dmName = true"
                      @on-blur="dmName = false" v-model.trim="domainName" type="textarea" placeholder="批量请换行分隔">
                 <template #suffix>
                   <Icon type="ios-search"/>
                 </template>
               </Input>
             </div>
           </div>
          <span class="item-name">长度</span>
          <InputNumber
            v-model.trim="startLen"
            number
            placeholder="请输入"
            maxlength="10"
            :min="0"
            type="number"
            style="width: 120px"
          />
          <div class="two-input-middle"></div>
          <InputNumber
            v-model.trim="endLen"
            number
            placeholder=""
            type="number"
            :min="0"
            maxlength="10"
            style="width: 120px"
          />
          <span class="item-name">竞价类型</span>
          <Select v-model="biddingType" multiple  style="width: 150px">
            <Option
              v-for="(item) in biddingTypeList"
              :value="item.value"
              :key="item.value"
              >{{ item.name }}</Option
            >
          </Select>
           <div
               class="user-strong-button line-button-size"
               style="margin: 0px 10px 0px 30px;"
               @click="pageChange(1)"
           >
             搜索
           </div>
           <div class="user-normal-button line-button-size" @click="reset">
             重置
           </div>
        </div>
      </div>
    </div>

    <div class="user-main-box pub-m-t-20">
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-line search-result-line flx-row-bw-c">
          <span class="c-g f-14"
            >搜索结果共<span class="c-black">{{
              total != null ? ` ${total} ` : ""
            }}</span
            >条</span
          >
        </div>
        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
              <th><div class="line-style">域名</div></th>
              <th><div class="line-style">结拍价格（元）</div></th>
              <th v-if="biddingStatusSelect == 1">
                <div class="line-style">您的出价（元）</div>
              </th>
              <th><div class="line-style">保证金（元）</div></th>
              <th><div class="line-style">续费费用（元）</div></th>
              <th v-if="biddingStatusSelect == 0">
                <div class="line-style">待付尾款（元）</div>
              </th>
              <th>
                <div class="line-style">
                  {{ biddingStatusSelect == 0 ? "交易状态" : "保证金状态" }}
                </div>
              </th>
              <th><div class="line-style">结拍时间</div></th>
              <th><div class="line-style">操作</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{ (page - 1) * pageSize + index + 1 }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{ item.domainName }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{
                    item.currentPrice
                  }}</span>
                </div>
              </td>
              <td v-if="biddingStatusSelect == 1">
                <div class="line-style">
                  <span class="normal-f">{{ item.price }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.bond }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.renewPrice }}</span>
                </div>
              </td>
              <td v-if="biddingStatusSelect == 0">
                <div class="line-style">
                  <span class="normal-f">{{ item.finalPayment }}</span>
                </div>
              </td>
              <td>
                <div
                  class="line-style normal-f"
                  v-if="biddingStatusSelect == 0"
                >
                  {{
                   item.status == 0
                      ? "竞价中"
                      : item.status == 1
                      ? "待付尾款中"
                      : item.status == 2
                      ? "已支付"
                      : item.status == 3
                      ? "已过户"
                      : item.status == 4
                      ? "交易违约"
                      : item.status == 5
                      ? "竞价失败"
                      : item.status == 6
                      ? "域名下线"
                      : "--"
                  }}
                </div>
                <div
                  class="line-style normal-f"
                  v-else-if="biddingStatusSelect == 1"
                >
                  {{ item.isFreeze == 0 ? "未解冻" : "已解冻" }}
                </div>
              </td>
              <td>
                <div class="line-style normal-f">{{ item.endTime }}</div>
              </td>
              <td>
                <div class="line-style normal-f">
                  <div
                    class="form-font-button"
                    @click="toDetail(item.biddingId)"
                  >
                    详情
                  </div>
                  <div
                    class="form-font-button"
                    v-if="item.status == 1"
                    @click="pay(item.biddingId, item.domainName)"
                  >
                    立即支付
                  </div>
                  <div
                    class="form-font-button"
                    v-if="item.status == 3"
                    @click="toManage"
                  >
                    管理域名
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyWinnings, payForBidding } from "@/api/user";
import { createDateTypeList } from "@/utils/publicData";
export default {
  name: "VipMywinnings",
  data() {
    return {
      loading: false,
      dmName: false,
      breadCrumb: [{name: "管理中心"},{ name: "域名竞价" }, { name: "我的得标" }],
      tablist: [
        {
          name: "我的得标",
          to: "/user/mywinnings",
        },
      ],
      biddingStatus: ["已得标", "未得标"],
      biddingStatusSelect: 0,
      //0：竞价中 1：待付尾款中 2：已支付 3：已过户 4：交易违约 5：竞价失败 6：域名下线
      bidStatus: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "竞价中",
          value: 0,
        },
        {
          name: "待付尾款",
          value: 1,
        },
        {
          name: "已支付",
          value: 2,
        },
        {
          name: "已过户",
          value: 3,
        },
        {
          name: "交易违约",
          value: 4,
        },
        {
          name: "竞价失败",
          value: 5,
        },
        {
          name: "域名下线",
          value: 6,
        },
      ],
      bidStatusSelect: 0,
      test: "",
      biddingType:[],
      biddingTypeList:[],

      // 表单数据
      time: [],
      startTime: "",
      endTime: "",
      startLen: '',
      endLen: '',
      startPrice: '',
      endPrice: '',
      domainName: "",

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
      dateType: 0,
      dateTypeList: [],
      dateOption: {
      },
    };
  },
  created() {
    this.createDateTypeList()
    const { tab } = this.$route.query;
    if (tab) {
      this.bidStatusSelect = parseInt(tab);
    }
    this.getMyWinnings();
  },
  async mounted() {
    const data = await this.$storage.getDomainQueryTerm();
    this.biddingTypeList = data.platforms;
  },
  methods: {
    changeDateType() {
      this.changeDateOption()
    },
    changeDateOption() {
      this.time = []
      this.startTime = null
      this.endTime = null
      this.dateOption = {
        disabledDate: date => {
          let item = this.dateTypeList.filter(item => item.type === this.dateType);
          return date && (date.valueOf() < item[0].startTime || date.valueOf() > item[0].endTime);
        }
      };
    },
    createDateTypeList() {
      this.dateTypeList = createDateTypeList(6)
      this.changeDateOption()
    },
    // 切换分类
    changeClassify(index) {
      if (index == this.biddingStatusSelect) return;
      this.biddingStatusSelect = index;
      this.reset();
    },
    // 交易状态改变
    bidStatusSelectChange(index) {
      this.bidStatusSelect = index;
      this.pageChange(1);
    },
    // 获取列表
    async getMyWinnings() {
      if (this.startPrice || this.endPrice) {
        if (
          !(
            this.startPrice &&
            this.endPrice &&
            this.startPrice > 0 &&
            this.endPrice > 0 &&
            this.startPrice < this.endPrice
          )
        ) {
          this.$Message.warning("请确认筛选条件是否输入错误！");
          return;
        }
      }
      if (this.startLen || this.endLen) {
        if (
          !(
            this.startLen &&
            this.endLen &&
            this.startLen > 0 &&
            this.endLen > 0 &&
            this.startLen < this.endLen
          )
        ) {
          this.$Message.warning("请确认筛选条件是否输入错误！");
          return;
        }
      }
      this.loading = true;
      let domainName = this.domainName.replace(/\n/g, ",");
      let data = {
        winStatus: this.biddingStatusSelect == 0 ? 1 : 0,
        startTime: this.startTime,
        endTime: this.endTime,
        domainName: domainName,
        limit: this.pageSize,
        page: this.page,
        startLen: this.startLen,
        endLen: this.endLen,
        startPrice: this.startPrice,
        endPrice: this.endPrice,
        platforms: this.biddingType,
        dateType: this.dateType,
      };
      if (this.biddingStatusSelect == 0) {
        data.status = this.bidStatus[this.bidStatusSelect].value;
      }
      let res = await getMyWinnings(data);
      if (res.code == 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 日期选择改变
    dateChange(date) {
      this.startTime = date[0];
      this.endTime = date[1];
    },
    // 重置
    reset() {
      this.time = [];
      this.bidStatusSelect = 0;
      this.startTime = "";
      this.endTime = "";
      this.domainName = "";
      this.startLen = "";
      this.endLen = "";
      this.startPrice = "";
      this.endPrice = "";
      this.page = 1;
      this.dateType = 0
      this.biddingType=[];
      this.getMyWinnings();
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getMyWinnings();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 跳转到详情
    toDetail(id) {
      window.open(`/bidding/details?id=${id}`);
    },
    // 去管理
    toManage() {
      this.$router.push("/user/mydn");
    },
    // 支付
    pay(id, dn) {
      this.$Modal.confirm({
        title: "付款确认",
        content: `<p>确定要为${dn}这个域名付款吗？</p>`,
        onOk: async () => {
          let res = await payForBidding(id);
          if (res.code == 200) {
            this.$Message.success("支付成功！");
            this.getMyWinnings();
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ivu-select-multiple .ivu-select-selection{
  height: auto !important;
}
.mg-r-25 {
  margin-right: 25px;
}
</style>
